/**
 * 商品编辑/发布页面组件
 * 
 * 功能说明：
 * - 提供商品信息编辑表单
 * - 支持图片上传与预览
 * - 支持商品分类选择
 * - 支持商品成色和联系方式设置
 * - 支持发布新商品和编辑已有商品
 * 
 * 页面逻辑：
 * - 通过路由参数id判断是编辑模式还是发布模式
 * - 编辑模式下自动加载商品数据
 * - 发布模式下提供默认表单配置
 * - 表单提交后根据模式调用不同API
 */

import React, { useState, useEffect } from 'react'
import { 
  Card, 
  Form, 
  Input, 
  Select, 
  Button, 
  Upload, 
  message, 
  Row, 
  Col, 
  InputNumber,
  Space,
  Divider,
  Image,
  Typography,
  Tag
} from 'antd'
import { 
  PlusOutlined, 
  DeleteOutlined, 
  EyeOutlined,
  SaveOutlined,
  UploadOutlined
} from '@ant-design/icons'
import { useAuthStore } from '@stores/auth'
import { useNavigate, useParams } from 'react-router-dom'
import apiClient from '../services/api'

const { Option } = Select
const { TextArea } = Input
const { Title, Text } = Typography

// 商品成色选项配置
// 包含值、显示文本和对应颜色，用于成色选择下拉框
const CONDITION_OPTIONS = [
  { value: 'new', label: '全新', color: 'green' },
  { value: 'like_new', label: '几乎全新', color: 'blue' },
  { value: 'good', label: '良好', color: 'cyan' },
  { value: 'fair', label: '一般', color: 'orange' },
  { value: 'poor', label: '较差', color: 'red' }
]

// 联系方式选项配置
// 包含值和显示文本，用于联系方式选择下拉框
const CONTACT_OPTIONS = [
  { value: 'message', label: '站内消息' },
  { value: 'phone', label: '电话联系' },
  { value: 'wechat', label: '微信' },
  { value: 'qq', label: 'QQ' }
]

/**
 * 商品编辑/发布页面组件
 * 
 * @returns {JSX.Element} 商品编辑/发布页面元素
 */
function ProductEditPage() {
  // 获取用户认证状态和用户信息
  const { isAuthenticated, user } = useAuthStore()
  // 获取路由导航功能
  const navigate = useNavigate()
  // 获取路由参数中的商品ID（编辑模式下存在）
  const { id } = useParams()
  // 创建表单实例
  const [form] = Form.useForm()

  // 状态管理
  const [loading, setLoading] = useState(false)           // 页面加载状态
  const [submitting, setSubmitting] = useState(false)     // 表单提交状态
  const [categories, setCategories] = useState([])         // 商品分类列表
  const [imageList, setImageList] = useState([])           // 图片列表
  const [previewVisible, setPreviewVisible] = useState(false) // 图片预览显示状态
  const [previewImage, setPreviewImage] = useState('')     // 预览图片URL
  const [isEditing, setIsEditing] = useState(false)        // 是否为编辑模式

  // 组件初始化
  useEffect(() => {
    // 检查用户是否已登录
    if (!isAuthenticated) {
      message.error('请先登录')
      navigate('/login')
      return
    }

    // 获取商品分类列表
    fetchCategories()
    
    // 如果存在商品ID，则为编辑模式，加载商品数据
    if (id) {
      setIsEditing(true)
      fetchProductData()
    }
  }, [isAuthenticated, id, navigate])

  // 获取商品分类列表
  const fetchCategories = async () => {
    try {
      const response = await apiClient.get('/api/products/categories')
      // 后端返回 {status: "success", data: [...]}
      setCategories(Array.isArray(response.data.data) ? response.data.data : [])
    } catch (error) {
      console.error('获取分类列表失败:', error)
      message.error('获取分类列表失败')
    }
  }

  // 获取商品数据（编辑模式）
  const fetchProductData = async () => {
    try {
      setLoading(true)
      const response = await apiClient.get(`/api/products/${id}`)
      
      if (response.data.success) {
        const product = response.data.data.product
        
        // 填充表单数据
        form.setFieldsValue({
          title: product.title,
          description: product.description,
          price: product.price,
          category_id: product.category_id,
          condition: product.condition,
          contact_method: product.contact_method,
          location: product.location
        })

        // 设置图片列表
        if (product.images) {
          const images = product.images.map((url, index) => ({
            uid: `-${index}`,
            name: `image-${index}`,
            status: 'done',
            url: url
          }))
          setImageList(images)
        }
      }
    } catch (error) {
      console.error('获取商品数据失败:', error)
      message.error('获取商品数据失败')
      navigate('/products')
    } finally {
      setLoading(false)
    }
  }

  // 处理图片上传
  const handleImageUpload = ({ fileList }) => {
    setImageList(fileList)
  }

  // 图片预览
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj)
    }
    setPreviewImage(file.url || file.preview)
    setPreviewVisible(true)
  }

  // 获取图片Base64编码（用于预览）
  const getBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    })
  }

  // 自定义上传处理
  const customUpload = async ({ file, onSuccess, onError }) => {
    const formData = new FormData();
    formData.append('image', file);
    try {
      const response = await apiClient.post('/api/products/upload-image', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      if (response.data.success) {
        onSuccess({ url: `/uploads/${response.data.image_url}` });
      } else {
        onError(new Error('上传失败'));
      }
    } catch (err) {
      onError(err);
    }
  };

  // 删除图片
  const handleRemoveImage = (file) => {
    return new Promise((resolve) => {
      setImageList(prev => prev.filter(item => item.uid !== file.uid))
      resolve(true)
    })
  }

  // 表单提交处理
  const handleSubmit = async (values) => {
    try {
      setSubmitting(true)

      // 准备图片URL列表
      const imageUrls = imageList
        .filter(img => img.status === 'done')
        .map(img => img.url || img.response?.url)
        .filter(Boolean)

      const requestData = {
        ...values,
        images: imageUrls
      }

      let response
      if (isEditing) {
          // 编辑模式下调用更新API
          response = await apiClient.put(`/api/products/${id}`, requestData)
        } else {
          // 发布模式下调用创建API
          response = await apiClient.post('/api/products', requestData)
        }

      if (response.data.success) {
        message.success(isEditing ? '商品更新成功' : '商品发布成功')
        navigate('/products')
      }
    } catch (error) {
      console.error('提交失败:', error)
      message.error(error.response?.data?.message || '提交失败')
    } finally {
      setSubmitting(false)
    }
  }

  // 表单重置处理
  const handleReset = () => {
    form.resetFields()
    setImageList([])
  }

  // 预览商品处理
  const handlePreviewProduct = () => {
    const values = form.getFieldsValue()
    console.log('预览商品:', values)
    message.info('预览功能开发中...')
  }

  // 上传按钮组件
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传图片</div>
    </div>
  )

  return (
    <div style={{ 
      marginTop: 64,
      marginLeft: isAuthenticated ? 200 : 0,
      minHeight: 'calc(100vh - 64px)',
      padding: '24px'
    }}>
      <Card loading={loading}>
        <Title level={2}>
          {isEditing ? '编辑商品' : '发布商品'}
        </Title>
        
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={{
            condition: 'good'
          }}
        >
          <Row gutter={24}>
            {/* 基本信息卡片 */}
            <Col xs={24} md={12}>
              <Card title="基本信息" size="small" style={{ marginBottom: 16 }}>
                {/* 商品名称字段 */}
                <Form.Item
                  label="商品名称"
                  name="title"
                  rules={[
                    { required: true, message: '请输入商品名称' },
                    { min: 2, message: '商品名称至少2个字符' },
                    { max: 100, message: '商品名称最多100个字符' }
                  ]}
                >
                  <Input placeholder="请输入商品名称" />
                </Form.Item>

                {/* 商品描述字段 */}
                <Form.Item
                  label="商品描述"
                  name="description"
                  rules={[
                    { required: true, message: '请输入商品描述' },
                    { min: 10, message: '商品描述至少10个字符' },
                    { max: 2000, message: '商品描述最多2000个字符' }
                  ]}
                >
                  <TextArea 
                    rows={6} 
                    placeholder="请详细描述商品的特点、使用情况、购买时间等信息"
                    showCount
                    maxLength={2000}
                  />
                </Form.Item>

                {/* 价格和分类行 */}
                <Row gutter={16}>
                  <Col span={12}>
                    <Form.Item
                      label="价格"
                      name="price"
                      rules={[
                        { required: true, message: '请输入商品价格' },
                        { type: 'number', min: 0.01, message: '价格必须大于0' }
                      ]}
                    >
                      <InputNumber
                        style={{ width: '100%' }}
                        min={0.01}
                        max={999999.99}
                        step={0.01}
                        precision={2}
                        placeholder="0.00"
                        addonBefore="¥"
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      label="商品分类"
                      name="category_id"
                      rules={[{ required: true, message: '请选择商品分类' }]}
                    >
                      <Select placeholder="请选择分类">
                        {categories.map(category => (
                          <Option key={category.id} value={category.id}>
                            {category.name}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  </Col>
                </Row>

                {/* 成色和联系方式行 */}
                <Row gutter={16}>
                  <Col span={12}>
                    <Form.Item
                      label="商品成色"
                      name="condition"
                      rules={[{ required: true, message: '请选择商品成色' }]}
                    >
                      <Select placeholder="请选择成色">
                        {CONDITION_OPTIONS.map(option => (
                          <Option key={option.value} value={option.value}>
                            <Tag color={option.color}>{option.label}</Tag>
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      label="联系方式"
                      name="contact_method"
                      rules={[{ required: true, message: '请选择联系方式' }]}
                    >
                      <Select placeholder="请选择联系方式">
                        <Option value="message">站内消息</Option>
                        <Option value="phone">电话联系</Option>
                        <Option value="wechat">微信联系</Option>
                        <Option value="qq">QQ联系</Option>
                      </Select>
                    </Form.Item>
                  </Col>
                </Row>

                {/* 交易地点字段 */}
                <Form.Item
                  label="交易地点"
                  name="location"
                  rules={[{ max: 100, message: '交易地点最多100个字符' }]}
                >
                  <Input placeholder="请输入交易地点（可选）" />
                </Form.Item>
              </Card>
            </Col>

            {/* 商品图片卡片 */}
            <Col xs={24} md={12}>
              <Card title="商品图片" size="small" style={{ marginBottom: 16 }}>
                <Text type="secondary" style={{ marginBottom: 16, display: 'block' }}>
                  最多上传8张图片，第一张图片将作为封面
                </Text>
                
                {/* 图片上传组件 */}
                <Form.Item label="商品图片" required>
                  <Upload
                    listType="picture-card"
                    fileList={imageList}
                    customRequest={customUpload}
                    onChange={handleImageUpload}
                    onPreview={handlePreview}
                    onRemove={handleRemoveImage}
                    accept="image/*"
                    maxCount={5}
                  >
                    {imageList.length >= 5 ? null : (
                      <div>
                        <PlusOutlined />
                        <div style={{ marginTop: 8 }}>上传</div>
                      </div>
                    )}
                  </Upload>
                </Form.Item>

                {/* 图片预览组件 */}
                {previewVisible && (
                  <Image
                    preview={{
                      visible: previewVisible,
                      onVisibleChange: setPreviewVisible,
                      src: previewImage
                    }}
                    style={{ display: 'none' }}
                  />
                )}
              </Card>
            </Col>
          </Row>

          {/* 操作按钮区域 */}
          <Divider />
          <Row justify="center">
            <Space size="large">
              <Button 
                onClick={handleReset}
                disabled={submitting}
              >
                重置
              </Button>
              <Button 
                onClick={handlePreviewProduct}
                icon={<EyeOutlined />}
                disabled={submitting}
              >
                预览
              </Button>
              <Button 
                type="primary" 
                htmlType="submit"
                loading={submitting}
                icon={<SaveOutlined />}
                size="large"
              >
                {isEditing ? '更新商品' : '发布商品'}
              </Button>
            </Space>
          </Row>
        </Form>
      </Card>
    </div>
  )
}

export default ProductEditPage 